<template>
   <!-- 弹窗组件 -->
   <div class="dialog-box">
      <el-dialog
         v-model="dialogVisible"
         title="选择供应商"
         width="800"
      >
         <div class="dialog-content">
            <!-- 分组区域保持不变 -->
            <div class="row-1">
               <div
                  class="row-1-title"
                  v-show="!is_search"
               >
                  <div>供应商级别</div>
                  <div
                     style="cursor: pointer"
                     @click="handleSearch"
                  >
                     <el-icon><Search /></el-icon>
                  </div>
               </div>
               <div
                  class="row-1-title"
                  v-show="is_search"
               >
                  <el-input
                     style="width: 100%"
                     v-model="textValue"
                     placeholder="请输入"
                     placeholder-class="input-placeholder"
                     ref="SerRef"
                  />
               </div>
               <div
                  class="row-1-content"
                  v-for="item in FilterList"
                  :style="{ background: pageData.supplier_level_id === item.id ? '#172B4D' : '', color: pageData.supplier_level_id === item.id ? '#fff' : '' }"
                  :key="item.id"
                  @click="handleSupplierLevelChange(item)"
               >
                  <div>{{ item.name }}</div>
               </div>
            </div>

            <!-- 左侧产品列表 -->
            <div class="row-2">
               <div class="table-container">
                  <el-table
                     ref="leftTableRef"
                     :data="tableData"
                     style="width: 100%"
                     border
                     :row-key="(row:User) => row.id"
                  >
                     <el-table-column width="55">
                        <template #default="scope">
                           <el-radio
                              v-model="selectedRowId"
                              :label="scope.row.id"
                              @change="handleRadioChange(scope.row)"
                           />
                        </template>
                     </el-table-column>
                     <el-table-column
                        label="供应商名称"
                        property="Sname"
                        width="100"
                     >
                     </el-table-column>
                     <el-table-column
                        property="name"
                        label="联系人"
                        width="120"
                     />
                     <el-table-column
                        property="Sphone"
                        label="联系人电话"
                        show-overflow-tooltip
                        width="120"
                     />
                     <el-table-column
                        property="Sposition"
                        label="联系人职位   "
                        show-overflow-tooltip
                        width="120"
                     />
                  </el-table>
               </div>
            </div>
         </div>

         <template #footer>
            <div class="dialog-footer">
               <el-button @click="dialogVisible = false">取消</el-button>
               <el-button
                  color="#626aef"
                  @click="submit"
                  >确认</el-button
               >
            </div>
         </template>
      </el-dialog>
   </div>
</template>

<script setup lang="ts">
   import { ref, defineEmits } from "vue";
   import { Search } from "@element-plus/icons-vue";
   import api from "@/api/index.js";
   import type { ElTable } from "element-plus";
   interface User {
      Sname: string;
      name: string;
      Sphone: string;
      Sposition: string;
      id: number;
   }
   const pageData = ref<{
      pageSize: number;
      page: number;
      supplier_level_id: number; // 供应商级别
      keywords: string; // 搜索关键字
   }>({
      pageSize: 100,
      page: 1,
      supplier_level_id: 0, // 供应商级别
      keywords: "", // 搜索关键字
   });
   const tableData = ref<User[]>([]);
   // 获取供应商
   const getSupplierList = async () => {
      const res = await api.supplier.supplierList(pageData.value);
      if (res.code === 200) {
         tableData.value = res.data.data.map((item: any) => ({
            Sname: item.name,
            name: item.contact_person,
            Sphone: item.contact_phone,
            Sposition: item.contact_position,
            id: item.id,
         }));
      }
   };
   const handleSupplierLevelChange = (item: any) => {
      pageData.value.supplier_level_id = item.id;
      getSupplierList(); // 供应商列表
   };
   const selectedRowId = ref<Number>(); // 选中的供应商id
   const selectedRow = ref<User>(); // 选中的供应商

   const handleRadioChange = (row: User) => {
      is_search.value = false;
      selectedRow.value = row;
   };
   // 打开弹窗
   const dialogVisible = ref<boolean>(false);
   const openLoading = () => {
      pageData.value = {} as unknown as {
         pageSize: number;
         page: number;
         supplier_level_id: number; // 供应商级别
         keywords: string; // 搜索关键字
      };
      dialogVisible.value = true;
      getList(); // 供应商级别
      getSupplierList(); // 供应商列表
   };
   const submit = () => {
      if (selectedRow.value) {
         emit("selectSupplier", selectedRow.value);
      }
      dialogVisible.value = false;
   };
   const emit = defineEmits(["selectSupplier"]);

   // 搜索
   import { ElInput } from "element-plus";
   import { watch } from "vue";
   const textValue = ref<string>("");
   const is_search = ref<boolean>(false);
   const SerRef = ref<InstanceType<typeof ElInput>>();
   const handleSearch = () => {
      is_search.value = !is_search.value;
   };
   const List = ref<
      {
         name: string;
         id: number;
      }[]
   >([]);
   const getList = async () => {
      const res = await api.publicFun.getSupplierLevelList();
      List.value = res.data.map((item: any) => ({
         name: item.name,
         id: item.id,
      }));
   };

   const FilterList = computed(() => {
      if (textValue.value) {
         return List.value.filter((item) => item.name.includes(textValue.value));
      } else {
         return List.value;
      }
   });
   // 监听is_search变化，当为true时自动获取焦点
   watch(is_search, (newVal) => {
      if (newVal) {
         nextTick(() => {
            SerRef.value?.focus();
         });
      }
   });
   defineExpose({ openLoading });
</script>

<style lang="scss" scoped>
   .dialog-content {
      display: flex;
      height: 400px;
      flex-direction: row;
      gap: 10px;
      .row-1 {
         flex: 1;
         border: 1px solid #f0f0f0;

         .row-1-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            width: 76%;
            height: 32px;
            border-bottom: 1px solid #f0f0f0;
            margin: 0 auto;
            color: #172b4d;
         }
         .row-1-content {
            border-radius: 4px;
            padding: 10px;
            padding-left: 20px;
            margin: 0 10px;
            &:hover {
               background: #edecff;
               cursor: pointer;
               color: #626aef;
            }
         }
      }
      .row-2 {
         flex: 2;
         border: 1px solid #f0f0f0;
         width: 100%;
         display: flex;
         flex-direction: column;
         overflow: hidden;

         .row-2-search {
            padding: 10px;
            width: 50%;
         }

         .table-container {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;

            &::-webkit-scrollbar {
               width: 6px;
               height: 6px;
            }

            &::-webkit-scrollbar-thumb {
               border-radius: 3px;
               background: #ddd;
            }

            &::-webkit-scrollbar-track {
               border-radius: 3px;
               background: #f5f5f5;
            }

            .el-table {
               height: 100%;
            }
         }
      }
   }
   ::v-deep .el-dialog {
      --el-dialog-padding-primary: 0px;
   }
   ::v-deep .el-dialog__header {
      padding: 10px 16px;
      border-bottom: 1px solid #f0f0f0;
      font-weight: bold;
   }
   ::v-deep .dialog-footer {
      padding: 10px 16px;
      border-top: 1px solid #f0f0f0;
   }
   ::v-deep .el-dialog__headerbtn .el-dialog__close {
      color: #000;
   }
   ::v-deep .el-dialog__body {
      padding: 20px 10px;
   }
   :deep(.cell) {
      white-space: nowrap;
      text-overflow: ellipsis;
   }
   :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: #6860ff;
      border-color: #6860ff;
   }
   :deep(.el-checkbox__inner:hover) {
      border-color: #626aef !important;
   }
   :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
      background-color: #6860ff;
   }
   :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
      border-color: #6860ff;
   }
   :deep(.el-radio__label) {
      display: none;
   }
   :deep(.el-radio__input.is-checked .el-radio__inner) {
      background: #6860ff;
      color: #6860ff;
   }
   :deep(.el-radio) {
      border-color: none;
   }
</style>
